<template>
  <div class="c-ph24 c-pv24" :style="getVerticalSpacing(marginSettings) + getHorizontalSpacing(marginSettings)">
    <div
      :style="getInnerSpacing(marginSettings, 1, bookingList.length -1)"
      :class="[index != bookingList.length -1 ? (isSetPageBackground ? 'c-mb24' : 'c-mb50') : '', isSetPageBackground ? 'c-ph12 c-pv12 c-br16 c-bg-white' : '']" :key="index" v-for="(item,index) in bookingList">
      <div class="c-flex-row c-br16 c-p" @click="goBooking(item.atId)">
        <div class="c-ww120 c-hh120 c-text-hidden c-p c-flex-row c-flex-center c-flex-shrink0">
          <CoverImg :coverSizeClass="'c-w100 c-h c-text-hidden'" :class="coverStyleType == 2 ? 'c-br12' : 'c-brp50'" :coverUrl="$addXossFilter(item.headimg, require('@/assets/defult270.png'))" />
        </div>
        <div class="c-ml20 c-w0 c-flex-grow1">
          <div class="c-flex-row c-justify-sb c-h">
            <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pr10">
              <div class="c-flex-row c-fs24 c-lh36 c-justify-sb c-aligni-start c-ww280">
                <div class="c-text-ellipsis1 c-fw-b">{{item.name}}</div>
              </div>
              <div class="c-flex-row">
                <div class="c-mr12 c-br8 c-pr10 c-pv2 c-ph8 theme-fc theme-bg-10 c-fs20 c-text-ellipsis1" v-if="item.title">{{item.title}}</div>
              </div>
              <div class="c-flex-row c-aligni-center c-fc-gray c-fs24">
                <div class="c-flex-row c-aligni-center c-fs22" v-if="visible.dataVisible">
                  <span>{{item.enrolls}}人预约</span>
                  <span class="c-ph12 c-hh28" v-if="item.distance != null">|</span>
                  <span v-if="item.distance != null">{{(item.distance/1000).toFixed(1)}}km</span>
                </div>
              </div>
            </div>
            <div class="c-flex-column c-aligni-end c-justify-sb">
              <div v-if="visible.priceVisible" class="c-textAlign-r">
                <div class="c-fw-b theme-fc c-fw600 c-lh36">
                  <span v-if="item.price * 1 > 0 && item.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                  <span :class="item.price * 1 > 0 && item.payType == 2 ? 'c-fs26' : 'c-fs22'">{{item.payType | priceValueFilter(item.price, 86, item.optimal, 'index')}}</span>
                </div>
                <div class="c-fc-gray c-lh28 c-text-decoration-through c-fs18" v-if="item.crossedPrice && item.crossedPrice * 1 != 0">
                  {{'￥' | iosPriceFilter}}{{item.crossedPrice}}
                </div>
              </div>
              <div class="c-ww120 c-hh48 c-lh48 c-textAlign-c c-fc-white c-br36 c-fs24 theme-bg">预约</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showMore && isList == false" class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center" @click="clickMore">
      <div class="c-ph20 c-pv8 theme-fc theme-bg-10 c-br50" :style="getMoreColor(headLine) + getHeadLineMore(headLine)">查看更多</div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import { customStyle } from '@/utils/customStyle.js'
import CoverImg from '@/components/templates/common/coverImg.vue';
export default {
  name: "BookingCom",
  mixins: [customStyle],
  components: {
    CoverImg
  },
  props: {
    headLine: {
      type: Object,
      default: null
    },
    marginSettings: {
      type: Object,
      default: null
    },
    bookingList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    showCount: {
      type: Number,
      default: 1
    },
    isList: {
      type: Boolean,
      default: false
    },
    showMore: {
      type: Boolean,
      default: false
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    },
    coverStyleType: {
      type: Number,
      default: 2
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      themeName: localStorage.getItem("themeName")
        ? localStorage.getItem("themeName")
        : "mb5",
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
    };
  },
  methods: {
    clickMore() {
      this.$emit('clickMore')
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    goBooking(atId) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let toPath = `/homePage/booking/bookingTime?atId=${atId}&ckFrom=${global.ckFrom.booking}`;
      this.iosAppRouteChange(toPath);
    },
  }
};
</script>

<style scoped>
.c-minh144 {
  min-height: 3.6rem;
}
.c-minh186 {
  min-height: 4.65rem;
}
.c-inlinebox {
  display: -webkit-inline-box;
}
</style>
